<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            let i = 1;
            $("#more").click(function () {
                let d = $("#d").clone(true);
                d.attr("id", "d" + i);
                $(this).before(d);
                // 将新增的div中的文件选择器内容清空
                $("#d" + i + " input").val("");
                i++;
            });
            $("a").click(function () {
                // if($(this.parentNode).attr("id") != "d"){
                //     $(this.parentNode).remove();
                // }
                if ($(this).parent().attr("id") != "d") {
                    $(this).parent().remove();
                }
            });
            $("#show").click(function () {
                // console.log($("input[type='file']").val());
                // 使用each函数进行遍历操作
                // each函数的参数是一个function类型

                // 有三种方式
                // 1.无参function,可以使用this表示当前迭代的元素
                // $("input[type='file']").each(function(){
                //     console.log("文件名:"+$(this).val());
                // });

                // 2.单参数function
                // 当存在一个参数时,该参数表示的是当前迭代元素的索引号
                // 此时仍然可以使用this,表示当前迭代的元素
                // $("input[type='file']").each(function(i){
                //     console.log("索引号:"+i+",文件名:"+$(this).val());
                // });

                // 3.两个参数的function
                // 参数一:索引号
                // 参数二:当前迭代的元素,DOM对象
                $("input[type='file']").each(function(i,e){
                    console.log("索引号:"+i+",文件名:"+$(e).val());
                });

            });
        })
    </script>
</head>
<body>
<!--
    1.当点击上传更多的时候,页面中新增了一个与原始div基本一致的div
        里面也包含了文件选择器与删除链接
        如果选择了文件之后点击上传更多
        原有的文件选择器中的内容仍然存在
        但是新增的文件选择器中没有选择任何文件
    2.删除时可以删除新增出来的内容,原始的不能被删除
-->
<div id="d">
    <input type="file">
    <a href="javascript:;">删除</a>
</div>
<input type="button" value="上传更多" id="more">
<input type="button" value="显示文件名" id="show">
</body>
</html>